<template>
    <div class="new-file file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="form">
                    <div class="form-item">
                        <div class="label">文件名称</div>
                        <pui-input placeholder="请输入文件名称" v-model="componentRef.fileName" type="input" clearAble full></pui-input>
                    </div>
                    <div class="form-item">
                        <div class="label">位置</div>
                        <pui-input disabled placeholder="默认路径" v-model="props.directoryPath" type="input" full icon="folder-open" iconPosition="right" @onIconClick="openFolderBrowser"></pui-input>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="createNewFile">创建</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'NewFile'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
import { projectService as project } from '@/services/phot_client/client'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '新建文件'
    },
    animate: {
        type: String,
        default: 'fade'
    },
    directoryPath: {
        type: String,
        default: ''
    }
})
const emit = defineEmits({
    openFolderBrowser: (val: any) => {},
    onClose: (val: any) => {}
})
const componentRef = reactive({
    dialogVisible: false,
    fileName: '',
    addressList: [
        {
            label: '默认位置',
            value: '1'
        },
        {
            label: '更改位置...',
            value: '2'
        }
    ],
    fileTypeList: [
        { value: 0, label: 'DIRECTORY' },   // 文件夹
        { value: 1, label: 'COMPONENT' },   // 组件
        { value: 2, label: 'PROJECT' },     // 项目
        { value: 3, label: 'GRAPH' },       // 图
        { value: 4, label: 'GRID' },        // 网格
        { value: 5, label: 'CONFIG' },      // 配置文件
        { value: 6, label: 'OTHER' }        // 其他
    ],
    fileType: 6,
    address: '默认位置'
})
watch([() => props.directoryPath],(v1) => {
    // console.log(v1)
    componentRef.address = v1[0]
})
const init = () => {
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
const createNewFile = async () => {
    const path = props.directoryPath + '/' +componentRef.fileName + '.txt'
    const fileObj = {
        path: path,
        name: componentRef.fileName,
        type: componentRef.fileType,
        data: ``
    }
    await project.newFile(path, fileObj).then((res: any) => {
        console.log(res)
    }).catch((err: any) => {

    })
}
const openFolderBrowser = () => {
    
    emit('openFolderBrowser', '浏览文件夹')
}
const getFileAddress = () => {

}
defineExpose({
    init
})
</script>
<style lang="scss">
@import './fileStyle.scss';
</style>